import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  Text,
  ScrollView,
  TouchableOpacity,
  Switch
} from 'react-native'

import NavBar from '../../../components/PublicHeader';
import { Images } from '../../../public/images/images';
import { Actions } from 'react-native-router-flux'
import UserInfo from '../../UserInfo/UserInfo'
import GroupProfile from '../../GroupProfile/GroupProfile'

export default class settings extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 用户数据
      // userDatas: this.props.navigation.state.params.data[0],
      Topping: false,
      disturb: false,
      isEnabled3: false,
      // Judgegroupchat: this.props.navigation.state.params.Judgegroupchat,
      Groupchatname: [
        '群聊名字', '群二维码', '群管理', '群备注'
      ],
      Groupchatnames: [
        '我在本群的昵称', '投诉']
    };
  }

  componentDidMount = () => {


  }

  ChatRightButton() {
    if (this.props.user.type === 'friend') {
      return (
        <UserInfo user={this.props.user} />
      )
    } else {
      return (
        <GroupProfile />
      )
    }
  }
  render() {
    // switch点击事件
    const toggleTopping = () => {
      if (this.state.Topping) {
        this.setState({ Topping: false })
      } else {
        this.setState({ Topping: true })
      }
    }
    const toggledisturb = () => {
      if (this.state.disturb) {
        this.setState({ disturb: false })
      } else {
        this.setState({ disturb: true })
      }
    }
    const toggleshield = () => {
      if (this.state.shield) {
        this.setState({ shield: false })
      } else {
        this.setState({ shield: true })
      }
    }
    // 群聊名字
    let Groupchatnamesetting = this.state.Judgegroupchat ? (
      <View >
        {
          this.state.Groupchatname.map((item, index) => (
            <TouchableOpacity key={index} style={styles.chatRecords} onPress={
              () => {
                if (index == 0) {
                  this.props.navigation.push('Groupchatnickname', { dete: '群聊（18)' })
                } else if (index == 1) {
                  this.props.navigation.push('qrcode', { date: false })
                } else if (index == 2) {
                  this.props.navigation.push('Groupchatnickname', { dete: '小高' })
                } else if (index == 3) {
                  this.props.navigation.push('Groupchatnickname', { dete: '小何' })
                }
              }
            }>
              <Text style={styles.chatRecord_text} >{item}</Text>
              <Image style={styles.chatRecord_img} source={Images.Vector} />
            </TouchableOpacity>
          ))
        }
      </View>
    ) : null
    // 我在本群的昵称
    let Groupchatnamesettings = this.state.Judgegroupchat ? (
      <View style={{ marginTop: 20 }}>
        {
          this.state.Groupchatnames.map((item, index) => (
            <View key={index} style={styles.chatRecords}>
              <Text style={styles.chatRecord_text}>{item}</Text>
              <Image style={styles.chatRecord_img} source={Images.Vector} />
            </View>
          ))
        }
      </View>
    ) : null
    //  {/* 置顶，消息免打扰，屏蔽 */}
    const Groupchatsettingswitch = this.state.Judgegroupchat == true ? <View style={styles.bodys}>
      <View style={styles.bodys_view}>
        <Text style={styles.bodys_view_text}>置顶聊天</Text>
        <Switch
          trackColor={{ false: "#767577", true: "#34C759" }}
          ios_backgroundColor="#3e3e3e"
          value={this.state.Topping}
          onValueChange={toggleTopping} />
      </View>
      <View style={styles.bodys_view}>
        <Text style={styles.bodys_view_text}>消息免打扰</Text>
        <Switch
          trackColor={{ false: "#767577", true: "#34C759" }}
          ios_backgroundColor="#3e3e3e"
          value={this.state.disturb}
          onValueChange={toggledisturb} />
      </View>
    </View> : <View style={styles.bodys}>
      <View style={styles.bodys_view}>
        <Text style={styles.bodys_view_text}>置顶聊天</Text>
        <Switch
          trackColor={{ false: "#767577", true: "#34C759" }}
          ios_backgroundColor="#3e3e3e"
          value={this.state.Topping}
          onValueChange={toggleTopping} />
      </View>
      <View style={styles.bodys_view}>
        <Text style={styles.bodys_view_text}>消息免打扰</Text>
        <Switch
          trackColor={{ false: "#767577", true: "#34C759" }}
          ios_backgroundColor="#3e3e3e"
          value={this.state.disturb}
          onValueChange={toggledisturb} />
      </View>
      <View style={styles.bodys_view}>
        <Text style={styles.bodys_view_text}>屏蔽此人</Text>
        <Switch
          trackColor={{ false: "#767577", true: "#34C759" }}
          ios_backgroundColor="#3e3e3e"
          value={this.state.shield}
          onValueChange={toggleshield} />
      </View>
    </View>
    // 清空聊天记录
    const Clearchat = this.state.Judgegroupchat == true ? <View style={{ marginTop: 20, marginBottom: 50 }}>
      <TouchableOpacity style={styles.chatRecordes}>
        <Text style={styles.chatRecord_text}>清空聊天记录</Text>
        <Image style={styles.chatRecord_img} source={Images.Vector} />
      </TouchableOpacity>
      <TouchableOpacity style={styles.chatRecordes}>
        <Text style={styles.chatRecord_text}>删除并退出</Text>
        <Image style={styles.chatRecord_img} source={Images.Vector} />
      </TouchableOpacity>
    </View> : <View>
      <TouchableOpacity style={styles.chatRecord}>
        <Text style={styles.chatRecord_text}>清空聊天记录</Text>
        <Image style={styles.chatRecord_img} source={Images.Vector} />
      </TouchableOpacity>
    </View>
    // 投诉
    const complaint = this.state.Judgegroupchat != true ? <TouchableOpacity onPress={() => {
      this.props.navigation.push('complaint');
    }} style={styles.chatRecord}>
      <Text style={styles.chatRecord_text}>投诉</Text>
      <Image style={styles.chatRecord_img} source={Images.Vector} />
    </TouchableOpacity> : null


    const removes = this.state.Judgegroupchat != true ? <TouchableOpacity style={styles.remove}>
      <Text style={styles.removes_text}>删除好友</Text>
    </TouchableOpacity> : null

    return (
      <View style={styles.padlrWarper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.props.user.type === 'friend' ? '个人信息' : '群组资料'}
          titleColor={"#333"}
        />
        <ScrollView>
          {/* 用户头像 */}
          {this.ChatRightButton()}
          {/* <View style={styles.headPortrait}>
            <TouchableOpacity onPress={() => {
              this.props.navigation.navigate('introduces', {
                params: true
              })
            }} style={styles.headPortrait2}>
              <Image style={styles.headPortrait2_img} source={this.state.userDatas.headPortrait} />
              <Text style={styles.img_text}>{this.state.userDatas.title}</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.headPortrait_text} onPress={() => {
              this.props.navigation.navigate('selectcontact')
            }}>
              <Text style={styles.headPortrait_text2}>+</Text>
            </TouchableOpacity>
          </View> */}
          {/* {Groupchatnamesetting} */}
          {/* 查找聊天记录 */}
          {/* <TouchableOpacity onPress={() => {
            this.props.navigation.push('findRecords')
          }} style={styles.chatRecord}>
            <Text style={styles.chatRecord_text}>查找聊天记录</Text>
            <Image style={styles.chatRecord_img} source={Images.Vector} />
          </TouchableOpacity> */}
          {/* 置顶，消息免打扰，屏蔽 */}
          {/* {Groupchatsettingswitch}
          {Groupchatnamesettings} */}
          {/* 清空聊天记录 */}
          {/* {Clearchat} */}
          {/* 投诉 */}
          {/* {complaint}
          {removes} */}
        </ScrollView>

      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent',
  },
  headPortrait: {
    backgroundColor: '#FFFFFF',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    padding: 15,
    marginTop: 30,
  },
  headPortrait_text2: {
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 50,
    color: '#ccc'
  },
  headPortrait2: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  headPortrait2_img: {
    width: 60,
    height: 60
  },
  img_text: {
    fontSize: 16,
    marginTop: 10
  },
  headPortrait_text: {
    width: 60,
    height: 60,
    borderWidth: 1,
    borderRadius: 30,
    marginLeft: 15,
    borderColor: '#ccc',
    borderStyle: 'dotted',
    flexDirection: 'column',
    justifyContent: 'center',
    display: 'flex'
  },
  chatRecord: {
    backgroundColor: '#ffffff',
    marginTop: 20,
    padding: 15,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  remove: {
    backgroundColor: '#ffffff',
    marginTop: 20,
    padding: 15,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  chatRecord_text: {
    fontSize: 17
  },
  removes_text: {
    fontSize: 17,
    textAlign: 'center',
    color: 'red'
  },
  chatRecord_img: {
    marginTop: 3
  },
  bodys: {
    marginTop: 30
  },
  bodys_view: {
    backgroundColor: '#ffffff',
    padding: 15,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  bodys_view_text: {
    fontSize: 17
  },
  chatRecords: {
    backgroundColor: '#ffffff',
    padding: 15,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderBottomColor: '#f2f2f2',
    borderBottomWidth: 1,
  },
  chatRecordes: {
    backgroundColor: '#ffffff',
    padding: 15,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  }
})